<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title> Test</title>
  <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
  
  <link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../jquery-1.3.2.min.js"></script>
  <!-- END: load jquery -->
  
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script>
		<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.js"></script>
		<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.js"></script>
	<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.js"></script>

  <!-- END: load jqplot -->
  <script type="text/javascript" language="javascript">
  
  $(document).ready(function(){

      // Supose this is what you get back from your ajax call
      var response = [{"Name":"CPU Usage","Frequency":[39,30,30,25,31,48,57,34,37,36,57,24],"XAxis":["2010-01-08 14:49:28","2010-01-08 14:54:28","2010-01-08 14:59:28","2010-01-08 15:04:28","2010-01-08 15:09:28","2010-01-08 15:14:28","2010-01-08 15:19:28","2010-01-08 15:24:28","2010-01-08 15:29:28","2010-01-08 15:34:28","2010-01-08 15:39:28","2010-01-08 15:44:28"]},{"Name":"RAM Usage","Frequency":[20,20,20,20,20,20,20,21,21,22,20,20],"XAxis":["2010-01-08 14:49:28","2010-01-08 14:54:28","2010-01-08 14:59:28","2010-01-08 15:04:28","2010-01-08 15:09:28","2010-01-08 15:14:28","2010-01-08 15:19:28","2010-01-08 15:24:28","2010-01-08 15:29:28","2010-01-08 15:34:28","2010-01-08 15:39:28","2010-01-08 15:44:28"]}];

      var dataLines = [];  // initialize the array of lines.
      var labels = [];  // initialize array of line labels.
      var current, i, j;  // some variables we'll need.

      for (i in response) {
          dataLines.push([]);  // add an empty line.
          current = response[i];
          labels.push(current.Name);
          for (j in current.XAxis) {
              dataLines[i].push([current.XAxis[j], current.Frequency[j]]);
          }
      }

      var options = {
          legend: { show: true },
          title: 'Hosted Service H/W Usage',
          series: [{ label: labels[0] }, { label: labels[1]}],           
          axesDefaults: {
              pad: 1.2,
              tickRenderer: $.jqplot.CanvasAxisTickRenderer,
              tickOptions: {
              angle: -30,
              enableFontSupport: true,
              //fontFamily: 'Georgia',
              fontSize: '9pt'               
              }
          },
          seriesDefaults: { showMarker:true , trendline: { show: false }, lineWidth: 2 },
          axes: {
              yaxis: {autoscale: true, label: '%[Percentage]', labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
              xaxis: {label: 'Date[5 min intervals]', tickInterval:'5 minutes', tickOptions:{formatString:'%H:%M:%S'}, renderer: $.jqplot.DateAxisRenderer}
          },
          highlighter: {
              sizeAdjust: 9,
              tooltipLocation: 'n',
              tooltipAxes: 'y',
              tooltipFormatString: '<b><i><span style="color:red;">Spec:</span></i></b> %.2f',
              useAxesFormatters: false
          }
      };

      var plot1 = $.jqplot('HistoricChart', dataLines, options);
    });
  
  </script>
  </head>
  <body>
<?php include "nav.inc"; ?>
    <div id="HistoricChart" style="margin-top:20px; margin-left:20px; width:600px; height:400px;"></div>
  </body>
</html>